<template>
	<div :id="prop.domId" style="width: 100%; height: 100%"></div>
</template>

<script lang="ts" setup>
import { nextTick } from 'vue'
import * as echarts from 'echarts'
const prop = defineProps({
	domId: String,
	data: Array,
	month: Array,
})
type EChartsOption = echarts.EChartsOption
const setLineData = () => {
	return prop.data?.map((item: any) => {
		return {
			name: item.name,
			type: 'line',
			stack: 'Total',
			data: item.value
		}
	})
}
nextTick(() => {
	let chartDom = document.getElementById(prop.domId as never)!
	let myChart = echarts.init(chartDom)
	let option: any

	option = {
		title: {
			text: '业绩曲线图',
			top: '0'
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			top: '30px',
			data: prop.data?.map((item: any) => item.name)
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			// feature: {
			// 	saveAsImage: {}
			// }
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: prop.month
		},
		yAxis: {
			type: 'value'
		},
		series: setLineData()
	}

	option && myChart.setOption(option)
})
</script>

<style></style>
